<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
<!--    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>-->
<!--    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>-->
</head>
<body>



<div class="layui-fluid">



    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
<!--                            <div><img src="../image/main1.PNG"/></div>-->
                            <div><img src="../image/test.PNG"/></div>
<!--                            <div><img src="../image/111.png"/></div>-->
                            <div><img src="../image/test4.PNG"/></div>
                        </div>
                    </div>
                    <!-- 条目中可以是任意内容，如：<img src=""> -->

                    <script src="/static/build/layui.js"></script>
                    <script>
                        layui.use('carousel', function(){
                            var carousel = layui.carousel;
                            //建造实例
                            carousel.render({
                                elem: '#test1'
                                ,width: '100%' //设置容器宽度
                                ,arrow: 'always' //始终显示箭头
                                //,anim: 'updown' //切换动画方式
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">


        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据统计</div>
                <div class="layui-card-body ">
                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>分店数</h3>
                                <p>
                                    <cite>3</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>会员数</h3>
                                <p>
                                    <cite>31</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>当日销量</h3>
                                <p>
                                    <cite>16</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>本月销量</h3>
                                <p>
                                    <cite>433</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6 ">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>日销售额</h3>
                                <p>
                                    <cite>3486</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6 ">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>月销售额</h3>
                                <p>
                                    <cite>166028</cite></p>
                            </a>
                        </li>
                    </ul>
                </div>


                <!--                        <br>-->
                <!--                        <br>-->
                <!--                        <div>-->
                <!--                        <div id="charts" style="width: 550px;height:400px; display: inline-block"></div>-->
                <!--                        <div id="charts2" style="width: 550px;height:400px;display: inline-block"></div>-->
                <!--                        </div>-->
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据可视化</div>
                <div class="layui-card-body ">
<!--                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">-->
<!--                        <div id="charts" style="width: 550px;height:400px; display: inline-block"></div>-->
<!--                        <div id="charts2" style="width: 550px;height:400px;display: inline-block"></div>-->
<!--                    </ul>-->
                    <img src="image/aaa.png" height="400px" width="1160px">
                    <br>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">系统信息</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <tbody>
                        <tr>
                            <th>系统版本</th>
                            <td>1.0.0</td>
                        </tr>
                        <tr>
                            <th>服务器地址</th>
                            <td>localhost</td>
                        </tr>
                        <tr>
                            <th>操作系统</th>
                            <td>CentOS</td>
                        </tr>
                        <tr>
                            <th>运行环境</th>
                            <td>xxxxxxx</td>
                        </tr>
                        <tr>
                            <th>MYSQL版本</th>
                            <td>8.0.11</td>
                        </tr>
                        <tr>
                            <th>上传附件限制</th>
                            <td>2M</td>
                        </tr>
                        <tr>
                            <th>执行时间限制</th>
                            <td>30s</td>
                        </tr>
                        <tr>
                            <th>剩余空间</th>
                            <td>86015.2M</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">开发团队</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <tbody>
                        <tr>
                            <th>版权所有</th>
                            <td>中南大学软件工程掌店团队</td>
                        </tr>
                        <tr>
                            <th>开发者</th>
                            <td>中南大学软件工程掌店团队</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <style id="welcome_style"></style>
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote layui-quote-nm">感谢支持</blockquote>
        </div>
    </div>
</div>
</div>
</body>
</html>


<!--<script type="text/javascript">-->
<!--    // 基于准备好的dom，初始化echarts实例-->
<!--    var myChart = echarts.init(document.getElementById('charts'), "light");-->
<!--    // 新建productName与nums数组来接受数据-->
<!--    var Date1 = [];-->
<!--    var total = [];-->
<!--    // 指定图表的配置项和数据-->
<!--    $.ajax({-->
<!--        type: "GET",-->
<!--        url: "/M_order/getOrderData",-->
<!--        dataType: "json",-->
<!--        async: false,-->
<!--        success: function (result) {-->
<!--            for (var i = 0; i < result.length; i++) {-->
<!--                Date1.push(result[i].orderDate.substring(0, 10));-->
<!--                total.push(result[i].totalPrice);-->

<!--            }-->
<!--        },-->
<!--        error: function (errorMsg) {-->
<!--            alert("获取后台数据失败！");-->
<!--        }-->
<!--    });-->


<!--    var option = {-->
<!--        title: {-->
<!--            text: '销售情况'-->
<!--        },-->
<!--        tooltip: {},-->
<!--        toolbox: {-->
<!--            show: true,-->
<!--            feature: {-->
<!--                mark: {show: true},-->
<!--                dataView: {show: true, readOnly: true},-->
<!--                magicType: {show: true, type: ['line', 'bar']},-->

<!--                restore: {show: false},-->
<!--                saveAsImage: {show: true}-->
<!--            }-->
<!--        },-->
<!--        legend: {-->
<!--            data: ['销售额']-->
<!--        },-->
<!--        xAxis: {-->
<!--            data: Date1-->
<!--        },-->
<!--        yAxis: {},-->
<!--        series: [{-->
<!--            name: '销量',-->
<!--            type: 'line',-->
<!--            data: total-->
<!--        }]-->
<!--    };-->
<!--    // 使用刚指定的配置项和数据显示图表。-->
<!--    myChart.setOption(option);-->
<!--</script>-->
<!--<script>-->
<!--    var myChart = echarts.init(document.getElementById('charts2'), "light");-->

<!--    var option = {-->
<!--        title: {-->
<!--            text: '销售情况分布',-->
<!--            subtext: '按日分布',-->
<!--            x: 'center'-->
<!--        },-->
<!--        tooltip: {-->
<!--            trigger: 'item',-->
<!--            formatter: "{a} <br/>{b} : {c} ({d}%)"-->
<!--        },-->
<!--        legend: {-->
<!--            orient: 'vertical',-->
<!--            left: 'left',-->
<!--        },-->
<!--        series: [-->
<!--            {-->
<!--                name: '日销',-->
<!--                type: 'pie',-->
<!--                radius: '55%',-->
<!--                center: ['50%', '60%'],-->
<!--                data: (function () {-->

<!--                    var datas = [];-->
<!--                    $.ajax({-->
<!--                        type: "get",-->
<!--                        url: "/M_order/getOrderData",-->
<!--                        dataType: "json",-->
<!--                        async: false,-->
<!--                        success: function (result) {-->

<!--                            for (var i = 0; i < result.length; i++) {-->
<!--                                datas.push({-->
<!--                                    "value": result[i].totalPrice, "name": result[i].orderDate.substring(0, 10)-->
<!--                                })-->
<!--                            }-->

<!--                        }-->
<!--                    })-->
<!--                    return datas;-->

<!--                })(),-->
<!--                itemStyle: {-->
<!--                    emphasis: {-->
<!--                        shadowBlur: 10,-->
<!--                        shadowOffsetX: 0,-->
<!--                        shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        ]-->
<!--    };-->
<!--    myChart.setOption(option);-->
<!--</script>-->


